<template>

  <el-container
      v-loading="mapLoading"
      element-loading-text="加载地图中..."
      element-loading-spinner="el-icon-loading">
    <el-header style="margin-bottom: 10px">
      <el-row :gutter="24" class="card">
        <el-card shadow="hover" class="card">
          <div class="container">
            <el-col :span="6">
              <GenericsSelect placeholder="选择类型"
                              :new-data="selectOption"
                              v-model="type"
              ></GenericsSelect>
            </el-col>
            <el-col :span="3">
              <el-button type="success" @click="queryData(type,cityCode,)">查询</el-button>
            </el-col>
            <el-col :span="3">
              <el-button type="primary" @click="$router.go(-1)">返回上一级</el-button>
            </el-col>
            <el-col :span="3">
              <el-button type="info"
                         @click="$router.push({name: 'MapVisual', query: {type: $route.query.type, cityCode:'china'}})">
                返回中国地图
              </el-button>
            </el-col>
          </div>
        </el-card>
      </el-row>
    </el-header>
    <el-main>
      <el-row :gutter="24" class="card">
        <el-card shadow="hover" class="card">
          <VisualPositionCountPieCharts :map-data="mapData"></VisualPositionCountPieCharts>
        </el-card>
      </el-row>
    </el-main>
  </el-container>
</template>

<script>
import VisualPositionCountPieCharts from "@/components/FormComponents/Charts/VisualMapCharts.vue";
import CitysCascafers from "@/components/FormComponents/Cascaders/CitysCascafers.vue";
import GenericsSelect from "@/components/FormComponents/Cascaders/GenericsSelect.vue";

export default {
  name: "MapVisual",
  data() {
    return {
      type: null,
      cityCode: null,
      mapData: {
        data: null,
        map: "china",
        title: "地区信息可视化 By:RuanYiFan",
        center: [106.35762, 35.287019],
        callBackFun: params => {
        }
      },
      mapLoading: true,
      selectOption: [{value: '0', label: '平均薪资'}, {value: '1', label: '招聘数量'},{value: '2', label: '最低薪资'},{value: '3', label: '最高薪资'}, {
        value: '2',
        label: '中位数薪资'
      },]
    }
  },
  methods: {
    initMapParams(type, cityCode) {
      this.mapLoading = true
      this.$api.getAvgSelery({city: cityCode, type: type}).then(rep => {
        this.mapData.data = rep.data
        const titleName = this.selectOption.find(item => item.value === type).label
        this.mapData.title = '地图信息可视化 - ' +titleName
        // this.mapData.title =1
            setTimeout(() => this.mapLoading = false, 500)
      })
      this.mapData.map = String(cityCode)
      if (cityCode === 'china') {
        this.mapData.center = [106.35762, 35.287019]
        this.mapData.callBackFun = this.clickProvince
      } else {
        this.mapData.center = null
      }
    },
    clickProvince(params) {
      let cityCode = this.$cityData[params.name]?.cityCode
      console.log('c', cityCode)
      if (!cityCode) {
        this.$alert('暂时没有' + params.name + '详细数据哦~', '温馨提示', {
          confirmButtonText: '确定',
        });
      } else {
        this.$router.push({name: "MapVisual", query: {type: this.$route.query.type, cityCode}})
      }
    },
    queryData(type, cityCode) {
      if (type === this.$route.query.type && cityCode === this.$route.query.cityCode) {
      } else {
        this.$router.push({"name": "MapVisual", query: {type, cityCode}})
      }
    },
  },
  mounted() {
    if (this.$route.query.type && this.$route.query.cityCode) {
      this.cityCode = this.$route.query.cityCode
      this.type = this.$route.query.type
      this.initMapParams(this.type, this.cityCode)
    } else {
      let cityCode = this.$route.query.cityCode ? this.$route.query.cityCode : 'china'
      let type = this.$route.query.type ? this.$route.query.type : '0'
      this.queryData(type, cityCode)
    }
  },
  watch: {
    '$route.query': {
      immediate: true,
      deep: true,
      handler(newVal, oldValue) {
        this.cityCode = newVal.cityCode
        this.type = newVal.type
        if (newVal.type && newVal.cityCode) {
          this.initMapParams(this.type, this.cityCode,)
        } else {
          this.cityCode = this.cityCode ? this.cityCode : 'china'
          this.type = this.type ? this.type : '0'
          this.$router.push({"name": "MapVisual", query: {type: this.type, cityCode: this.cityCode}})
        }


        // this.type = newVal.type
        // this.cityCode = newVal.cityCode
      }
    }
  },


  beforeRouteEnter(to, form, next) {
    next()
  },
  components: {GenericsSelect, CitysCascafers, VisualPositionCountPieCharts},

}
</script>

<style>
.container {
  display: flex;
  align-items: center;
}


</style>
